export default {
	data() {
		return {
        scrollLeft: 0, // 滚动scroll-view的左边滚动距离
        tabQueryInfo: [], // 存放对tab菜单查询后的节点信息
        componentWidth: 0, // 屏幕宽度，单位为px
        scrollBarLeft: 0, // 移动bar需要通过translateX()移动的距离
        parentLeft: 0, // 父元素(tabs组件)到屏幕左边的距离
        id: this.$u.guid(), // id值
        currentIndex: this.current,
        barFirstTimeMove: true, // 滑块第一次移动时(页面刚生成时)，无需动画，否则给人怪异的感觉
		}
	},
	computed: {

	},
	methods: {
      async css_init(){
         // 获取tabs组件的尺寸信息
         let tabRect = await this.$uGetRect('#junjun');
       //  console.log(tabRect)
         // tabs组件距离屏幕左边的宽度
         this.parentLeft = tabRect.left;
         // tabs组件的宽度
         this.componentWidth = tabRect.width;
         this.getTabRect();
       },
       getTabRect() {
         // 创建节点查询
         let query = uni.createSelectorQuery().in(this);
         // 历遍所有tab，这里是执行了查询，最终使用exec()会一次性返回查询的数组结果
         for (let i = 0; i < this.cate_list.length; i++) {
           // 只要size和rect两个参数
           query.select(`#u-tab-item-${i}`).fields({
             size: true,
             rect: true
           });
         }
         // 执行查询，一次性获取多个结果
         query.exec(
           function(res) {
            // console.log(res)
             this.tabQueryInfo = res;
             // 初始化滚动条和移动bar的位置
             this.scrollByIndex();
           }.bind(this)
         );
       },
       // 滚动scroll-view，让活动的tab处于屏幕的中间位置
       scrollByIndex() {
         // 当前活动tab的布局信息，有tab菜单的width和left(为元素左边界到父元素左边界的距离)等信息
         let tabInfo = this.tabQueryInfo[this.currentIndex];
         if (!tabInfo) return;
         // 活动tab的宽度
         let tabWidth = tabInfo.width;
         // 活动item的左边到tabs组件左边的距离，用item的left减去tabs的left
         let offsetLeft = tabInfo.left - this.parentLeft;
         // 将活动的tabs-item移动到屏幕正中间，实际上是对scroll-view的移动
         let scrollLeft = offsetLeft - (this.componentWidth - tabWidth) / 2;
         this.scrollLeft = scrollLeft < 0 ? 0 : scrollLeft;
         // 当前活动item的中点点到左边的距离减去滑块宽度的一半，即可得到滑块所需的移动距离
         let left = tabInfo.left + tabInfo.width / 2 - this.parentLeft;
         // 计算当前活跃item到组件左边的距离
         this.scrollBarLeft = left - uni.upx2px(this.barWidth) / 2;
         // 第一次移动滑块的时候，barFirstTimeMove为true，放到延时中将其设置false
         // 延时是因为scrollBarLeft作用于computed计算时，需要一个过程需，否则导致出错
         
         if(this.barFirstTimeMove == true) {
           setTimeout(() => {
             this.barFirstTimeMove = false;
           }, 100)
         }
         
       }, 


	}

}
